<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换效果</title>
</head>
<script src="jquery.min.js" ></script>
<script src="../jquery.slide.js" ></script>
<link rel="stylesheet" href="style.css" />
<body>
<style>
</style>
<div  style="margin:100px auto; width:500px;"  >
<h2>DEMO1 tab</h2>
<div class="btn_prev_next" index="1"> 
<button class="btn_prev">prev</button><button class="btn_next">next</button> 
<button class="btn_stop">stop</button><button class="btn_start">start</button></div>
<div id="demo_1">
  <ul class="tab" >
  	 <li class="on">昨天</li>
     <li>今天</li>
     <li>明天</li>
     <li>后天</li>
     <li>大后天</li>
   </ul>
    <div class="content" style="display:block;" > <img  src="images/t1.jpg"  />  </div>
    <div class="content" > <img  src="images/t2.jpg"  />  </div>
    <div class="content" > <img  src="images/t3.jpg"  />  </div>
    <div class="content" > <img  src="images/t4.jpg"  />  </div>
    <div class="content" > <img  src="images/t5.jpg"  />  </div>
    
</div>

<div class="blank" ></div>
<h2>DEMO 2 淡入淡出 fade</h2>
<div class="btn_prev_next" index="2">
<button class="btn_prev">prev</button><button class="btn_next">next</button>
<button class="btn_stop">stop</button><button class="btn_start">start</button></div>
<div id="demo_2"    >
  <ul class="tab" >
  	 <li class="on">1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
   </ul>
    <div class="content" style="display:block;" > <span>新品新生活1</span> <img  src="images/t1.jpg"  />  </div>
    <div class="content" > <span>美食，美酒2</span> <img  src="images/t2.jpg"  />  </div>
    <div class="content" > <span>母婴，玩具3</span> <img  src="images/t3.jpg"  />  </div>
    <div class="content" > <span>销售年中榜4</span> <img  src="images/t4.jpg"  />  </div>
    <div class="content" > <span>家电万元放5</span> <img  src="images/t5.jpg"  />  </div>
    
</div>
<div class="blank" ></div>
<h2>DEMO 3 上下滑动</h2>
<div class="btn_prev_next" index="3">
<button class="btn_prev">prev</button><button class="btn_next">next</button>
<button class="btn_stop">stop</button><button class="btn_start">start</button></div>
<div id="demo_3" >
  <ul class="tab" >
  	 <li class="on">1</li>
     <li>2</li> 
     <li>3</li>
     <li>4</li>
     <li>5</li>
   </ul>
   
  <ol class="content" >
    <li > <span>新品新生活1</span> <img  src="images/t1.jpg"  />  </li>
    <li > <span>美食，美酒2</span> <img  src="images/t2.jpg"  />  </li>
    <li > <span>母婴，玩具3</span><img  src="images/t3.jpg"  />  </li>
    <li > <span>销售年中榜4</span><img  src="images/t4.jpg"  />  </li>
    <li > <span>家电万元放5</span><img  src="images/t5.jpg"  />  </li>
   </ol>
</div>
<div class="blank" ></div>

<h2>DEMO 5 滑动切换效果2</h2>
<div class="btn_prev_next" index="5">
<button class="btn_prev">prev</button><button class="btn_next">next</button>
<button class="btn_stop">stop</button><button class="btn_start">start</button></div>
<div id="demo_5" >
  <ul class="tab" >
  	 <li class="on">1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
   </ul>
   
  <ol class="content" >
    <li class="on" > <span>新品新生活1</span> <img  src="images/t1.jpg"  />  </li>
    <li > <span>美食，美酒2</span> <img  src="images/t2.jpg"  />  </li>
    <li > <span>母婴，玩具3</span><img  src="images/t3.jpg"  />  </li>
    <li > <span>销售年中榜4</span><img  src="images/t4.jpg"  />  </li>
    <li > <span>家电万元放5</span><img  src="images/t5.jpg"  />  </li>
   </ol>
</div>

<div class="blank" ></div>
<h2>DEMO 4</h2>
<div id="demo_4" >
<div class="wrap" >
  <ul class="tab" >
  	 <li class="on normal"><img width="100%" height="100%"  src="images/t1.jpg"  /></li> 
     <li class="normal"><img   width="100%" height="100%" src="images/t2.jpg"  /></li>
     <li class="normal"><img width="100%" height="100%"  src="images/t3.jpg"  /></li>
     <li class="normal"><img width="100%" height="100%"  src="images/t4.jpg"  /></li>
     <div class="mask"></div>
   
   </ul>
   
  <ol class="content" >
    <li > <span>新品新生活1</span> <img  src="images/t1.jpg"  />  </li>
    <li > <span>美食，美酒2</span> <img  src="images/t2.jpg"  />  </li>
    <li > <span>母婴，玩具3</span><img  src="images/t3.jpg"  />  </li>
    <li > <span>销售年中榜4</span><img  src="images/t4.jpg"  />  </li>
 
   </ol>
</div>
</div>


</div>


<script >
 
 
/**/ 
var st=[];

//demo 1 普通
st[1]=$.st('#demo_1 li','#demo_1 .content',{'switchMode':'click'});

//demo 2 淡入淡出
st[2]=$.st('#demo_2 li','#demo_2 .content',{'mode':'fade','time':2.5,auto:false});
 
//demo 3 滑动方式
st[3]=$.st('#demo_3 > ul > li','#demo_3 >ol',{'mode':'slide','time':2});

//demo 5 滑动方式2
st[5]=$.st('#demo_5 ul li','#demo_5 >ol >li',{'mode':'slide2','time':2});

/*demo4  这种效果只是测试，没有集成到插件中*/
$mask=$('#demo_4 .mask');
$content=$('#demo_4 .content');
$('#demo_4 .tab li.normal').mouseover(function(){
	var self=this;
	var top=$(this).index()*($(this).height()+5);
	var current=$(this).index();
	//$mask.css({top:top});
	//bug($(this).css('top'));
	$('#demo_4 .tab .on').removeClass('on');
	
	$mask.stop().animate({top: top}, { duration: 500 });
	setTimeout(function(){$(self).addClass('on');},500);
	$content.find('li.on').removeClass('on');
	//$content.find('li').index($(this).index()).addClass('on');
	var e2=$content;
	height=e2.find('li').height();//若给img外面的li设上了高，则可以删去此行
	e2.stop().animate({ top:-current*(height) }, { duration: "slow" }); 
	//$(this).delay(1000).addClass('on');

});

$('.btn_prev').click(function(){
    var _index=$(this).parent().attr('index');
    st[_index].slide_to('prev');

})
$('.btn_next').click(function(){
    var _index=$(this).parent().attr('index');
    st[_index].slide_to('next');

})
$('.btn_stop').click(function(){
    var _index=$(this).parent().attr('index');
    st[_index].stop();
    bug(_index+' stop slide');

})
$('.btn_start').click(function(){
    var _index=$(this).parent().attr('index');
    st[_index].start();

})
function bug(o){
    console.log(o);	
}
</script>
 
</body>
</html>
